<template>
    <div>
        <a-form v-if="!queryData" class="candidate-information" :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
            <a-form-item label="考生姓名">
                <a-input
                placeholder="请输入考生姓名"
                    v-decorator="[
                    'fksxm', { initialValue:formState.fksxm, rules: rules.fksxm}
                ]"/>
            </a-form-item>
            <a-form-item label="手机号">
                <a-input
                    placeholder="请输入手机号"
                    v-decorator="['flxdh', { initialValue:formState.flxdh, rules: rules.flxdh}]"/>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 14, offset: 8 }">
                <a-button class="blue-btn" type="primary" :loading="confirmLoading" @click="handleSubmit" >查询</a-button>
            </a-form-item>
        </a-form>
        <div v-else>
            <div v-if="dataList.length">
                <div v-for="(item,index) in dataList" :key="item.id">
                    <div class="test-list-box-v">
                        <div class="test-list-left">
                            <span>试卷名称：{{ item.fsjmc }}</span>
                            <span>试卷类型：{{ item.fsjlx }}</span>
                            <span>提交时间：{{ item.ftjsj }}</span>
                        </div>
                        <a-button class="blue-btn" type="primary" @click="reviseClick(item)">查看详情</a-button>
                    </div>
                </div>
            </div>
            <div v-if="dataNode && !dataList.length">
                <a-result title="暂无数据">
                </a-result>
            </div>
        </div>
        <answerDetailed ref="refDetailed" :addEditParameter="addEditParameter"/>
    </div>
</template>
<script>
import validator from '@/common/validator'
import { queryResultsListServe } from './service/index'
import answerDetailed from './answerDetailed.vue'
export default{
    name:"candidateInformation",
    components:{
        answerDetailed
    },
    data(){
        return{
            form: this.$form.createForm(this, { name: 'coordinated' }),
            confirmLoading:false,
            testPaperId:this.$route.query.id,
            formState:{
                fksxm:'',
                flxdh:'',
            },
            rules:{
                fksxm: [{
                    required: true,
                    message: '请输入考生姓名',
                    trigger: 'blur',
                }],
                flxdh: [{
                    required: true,
                    message: '请输入手机号',
                    trigger: 'blur',
                },{
                    pattern: validator.isPhone.reg,
                    message: '请输入正确的手机号',
                    trigger: 'blur',
                }],
            },
            queryData:this.$route.query.value?this.$route.query.value.split(','):'',
            dataList:[],
            addEditParameter:{},
            dataNode:false,
        }
    },
    watch:{

    },
    mounted(){
        queryResultsListServe({fksxm:this.queryData[0],flxdh:this.queryData[1],}).then(res=>{
            if(res.code == 200){
                this.dataList = res.result
                this.dataNode = true
            }
        })
    },
    methods:{
        reviseClick(item){
            this.$refs.refDetailed.visibleDetailedShow = true
            this.addEditParameter = item
        },
        handleSubmit(){
            this.form.validateFields((err, values) => {
                if(!err){
                    this.confirmLoading = true
                    //console.log('提交用户信息',values)
                    queryResultsListServe(values).then(res=>{
                        if(res.code == 200){
                            
                            this.confirmLoading = false
                            var a = document.createElement('a');
                            a.target = '_blank'
                            a.href = bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL+process.env.BASE_URL+'queryResults?value='+[values.fksxm,values.flxdh]
                            a.click();
                        }else{
                            this.confirmLoading = false
                        }
                    })
                }
            });
        }
    }
}
</script>
<style lang="less">
.blue-btn{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
}
.candidate-information{
    margin: 20px;
}
.candidate-information .ant-form-item-label label{
    font-weight: 600;
}
.candidate-information .ant-form-item{
    display: flex;
    align-items: center;
}
.candidate-information .ant-form-item-label{
    text-align: right;
    padding-right: 10px;
}
.test-list-box-v{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px ;
    border-bottom: 1px solid #a4a2a2ee;
    .test-list-left{
        display: flex;
        flex-direction: column;
    }
}

</style>